<template>
  <div class="box1">
    <div style="display: flex">
      <div style="font-size: 50px; margin: 20px">{{low}}</div>
      <div style="font-size: 15px; margin: 10px 30px">
        <p>
          晴
          <span
            style="
              background: rgb(5, 255, 22);
              border-radius: 10px;
              padding: ;
              font-size: 13px;
            "
            >47优</span
          >
        </p>
        <p>24~36℃</p>
      </div>
      <div style="margin-left: 150px; margin-top: 40px">
        <img src="../imgs/yellow.png" alt="" />
        <span style="color: yellow">高温黄色预警</span>
      </div>
    </div>
    <!-- 中 -->
    <div class="tigan">
      <ul style="font-size: 20px">
        <li>{{low}}</li>
        <li>{{fengxiang}}</li>
        <li>34%</li>
      </ul>
    </div>
    <!-- 下 -->
    <div class="tianqi">
      <!-- 左 -->
      <div>
        <p>
          <span style="font-size: 20px">{{low}}~{{high}}</span
          ><span style="margin: 20px 40px; display: inline-block"></span
          ><img src="../imgs/yueliang.png" alt="" />
        </p>
        <p>
          <span>今天</span>
          <span
            style="
              background: rgb(5, 255, 22);
              border-radius: 10px;
              padding: 2px 5px;
              font-size: 13px;
              margin: 15px 45px;
              display: inline-block;
            "
            >{{low}}度</span
          >
          <span>晴</span>
        </p>
      </div>
      <!-- 右 -->
      <div>
        <p>
          <span style="font-size: 20px">{{low1}}~{{high1}}</span
          ><span style="margin: 20px 40px; display: inline-block"></span
          ><img src="../imgs/taiyang.png" alt="" />
        </p>
        <p>
          <span>明天</span>
          <span
            style="
              background: rgb(5, 255, 22);
              border-radius: 10px;
              padding: 2px 5px;
              font-size: 13px;
              margin: 15px 45px;
              display: inline-block;
            "
            >{{high1}}度</span
          >
          <span>晴</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Tianqi } from "../request/index";
import { reactive, onMounted, ref } from "vue";
const low=ref()
const high=ref()
const low1=ref()
const high1=ref()
const fengxiang=ref()
onMounted(() => {
  Tianqi().then((res) => {
   low.value=res.data.data[0].low
   high.value=res.data.data[0].high
   low1.value=res.data.data[1].low
   high1.value=res.data.data[1].high
   fengxiang.value=res.data.data[0].fengxiang
  });
  // const low = ref(res.data.data[0].low);
});
</script>

<style lang="scss">
.box1 {
  width: 90%;
  height: 450px;
  background: url("../imgs/border1.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 5%;
  margin-top: 3%;
  color: #fff;

  .tigan {
    width: 90%;
    height: 190px;
    margin-left: 5%;
    background: url("../imgs/tigan.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;

    ul {
      li {
        margin-top: 6%;
        margin-left: 80%;
      }
    }
  }

  .tianqi {
    width: 90%;
    height: 100px;
    background: url("../imgs/tianqi.png");
    background-size: 100% 100%;
    margin-left: 5%;
    margin-top: 5%;
    display: flex;

    div {
      width: 50%;
      text-align: center;
    }
  }
}
</style>
